内容

Astroに移行します。
詳しくは↓

• Astroに移行する #235

GatsbyからAstroに移行するまでにやったことは↓のリポジトリにブランチを分けて記録しています。

• https://github.com/Hiroshiba/voicevox_blog_astro

関連 Issue

close #235

その他

挙動はほとんど変わってないはずです。
大きく変わったのはこの辺り：

• GatsbyをやめAstroに移行した
• npmをやめpnpmに移行した
• 画像の読み込み時、プレビューとして画質の低い画像を自動で読み込んでいたのがなくなった
• キャラクター個別の製品ページで、左右矢印をクリックして隣のキャラクターに移動する時、アニメーションがなくなった
• 至る所にスナップショットテストが入った
• 呼び方ページに専用 URL が入った
• 呼び方ページで別キャラクターをクリックするとそのキャラクターに飛べるようになった

なんとなく見出したコーディングルール

READMEにもメモしている内容です。こちらでも書いてみます。

• pages に置くアセット用のディレクトリはスネークケース
• インポートした画像等は定数(constants)として良い
• 大文字始まりの Astro ファイルはコンポーネント
• インタラクティブが必要なものは無理せず React にしたほうが良い
  • 単純なボタンとかだけでも React のほうがコーディングしやすい
  • けど Astro 考えると<script>のが考えること少ないこともあり、判断が難しい
• React コンポーネントへのスタイル適用は helper.scss か、Astro でラップして<style>に書く
  • CSS in JS を使わない理由は単によく知らないから
  • Bulma から Tailwind に移行したいかも
• コンポーネントをまたぐインタラクティブな挙動は Store を使う
  • React hook は Astro 内で使えないので、なるべく使わない方針
• 静的ページやコンポーネントは Astro で作るのを意識すると楽
  • 画像の読み込みとか、ディレクティブとかが便利
• 子へのスタイル適用は Astro 内の is:global を使うと楽